window.onload = function () {
  fetchAllArticles(); // 页面加载时自动请求所有文章
};

// 显示发布文章区域并隐藏其他区域
function showPublishArticle() {
  document.getElementById("publish-page").classList.remove("hidden"); // 显示发布文章区域
  document.getElementById("search-page").classList.add("hidden"); // 隐藏搜索区域
  document.getElementById("all-articles").classList.add("hidden"); // 隐藏所有文章区域
  document.getElementById("search-results").classList.add("hidden"); // 隐藏搜索结果区域
}

// 返回主界面，显示搜索和文章列表
function returnToMain() {
  document.getElementById("publish-page").classList.add("hidden"); // 隐藏发布文章区域
  document.getElementById("search-page").classList.remove("hidden"); // 显示搜索区域
  document.getElementById("all-articles").classList.remove("hidden"); // 显示所有文章区域
  document.getElementById("search-results").classList.remove("hidden"); // 显示搜索结果区域
}

// 获取并显示所有文章的函数
function fetchAllArticles() {
  fetch("/cgi/search?query=") // 空查询表示获取所有文章
    .then((response) => response.json())
    .then((data) => {
      const articlesContainer = document.getElementById("all-articles");
      articlesContainer.innerHTML = "<h2>所有文章</h2>"; // 标题

      data.articles.forEach((article) => {
        const articleDiv = document.createElement("div");
        articleDiv.classList.add("article-preview");
        articleDiv.innerHTML = `
          <h3><a href="#" onclick="viewArticle(${article.id})">${article.title}</a></h3>
          <p>作者：${article.author} | 发布时间：${article.date}</p>
          <hr class="article-separator"> <!-- 分隔符 -->
        `;
        articlesContainer.appendChild(articleDiv);
      });
    })
    .catch((error) => console.error("获取所有文章错误:", error));
}

// 搜索文章
function searchArticles() {
  const searchQuery = document.getElementById("search-input").value;

  // 清空上一次的搜索结果和隐藏的搜索页面
  const resultsContainer = document.getElementById("search-results");
  resultsContainer.innerHTML = ""; // 清空上次搜索的内容
  document.getElementById("search-results").classList.remove("hidden"); // 确保显示搜索页面
  document.getElementById("publish-page").classList.add("hidden"); // 隐藏发布文章区域
  document.getElementById("all-articles").classList.add("hidden"); // 隐藏所有文章区域

  // 确保搜索查询非空
  if (!searchQuery.trim()) {
    alert("请输入搜索关键词！");
    return;
  }

  // 发起 GET 请求
  fetch(`/cgi/search?query=${encodeURIComponent(searchQuery)}`)
    .then((response) => {
      if (response.status === 403) {
        return response.text(); // 获取403响应正文
      }
      return response.ok
        ? response.json()
        : Promise.reject(new Error("非预期错误"));
    })
    .then((data) => {
      if (typeof data === "string") {
        // 说明是403页面 直接替换页面内容
        document.body.innerHTML = data; // 将响应的403页面内容插入到页面中
        return;
      }

      // 添加返回按钮
      const backBtn = document.createElement("button");
      backBtn.classList.add("back-btn");
      backBtn.innerText = "返回";
      backBtn.addEventListener("click", () => {
        // 返回主界面
        document.getElementById("search-results").classList.add("hidden");
        document.getElementById("all-articles").classList.remove("hidden");
      });
      resultsContainer.appendChild(backBtn);

      if (data.found) {
        // 显示指定文章
        data.articles.forEach((article) => {
          const articleDiv = document.createElement("div");
          articleDiv.classList.add("article-preview");
          articleDiv.innerHTML = `
            <h3><a href="#" onclick="viewArticle(${article.id})">${article.title}</a></h3>
            <p>作者：${article.author} | 发布时间：${article.date}</p>
             <hr class="article-separator"> <!-- 分隔符 -->
          `;
          resultsContainer.appendChild(articleDiv);
        });
      } else {
        // 显示未找到消息并显示所有文章
        const messageDiv = document.createElement("div");
        messageDiv.classList.add("no-results");
        messageDiv.innerText = "此文章不存在。以下是所有文章："; // 在这句话下面添加分隔符
        const separator = document.createElement("hr");
        resultsContainer.appendChild(messageDiv);
        resultsContainer.appendChild(separator);

        data.articles.forEach((article) => {
          const articleDiv = document.createElement("div");
          articleDiv.classList.add("article-preview");
          articleDiv.innerHTML = `
            <h3><a href="#" onclick="viewArticle(${article.id})">${article.title}</a></h3>
            <p>作者：${article.author} | 发布时间：${article.date}</p>
             <hr class="article-separator"> <!-- 分隔符 -->
          `;
          resultsContainer.appendChild(articleDiv);
        });
      }
    })
    .catch((error) => console.error("搜索错误:", error));
}

// 发布文章
function publishArticle() {
  const title = document.getElementById("article-title").value;
  const content = document.getElementById("article-content").value;
  if (!title.trim()) {
    alert("请输入文章标题！");
    return;
  }
  if (!content.trim()) {
    alert("请输入文章内容！");
    return;
  }

  fetch("/cgi/article", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: `title=${encodeURIComponent(title)}&content=${encodeURIComponent(
      content
    )}`,
  })
    .then((response) => {
      console.log(response.status); // 检查响应状态码
      if (response.status === 403) {
        // throw new Error("403 Forbidden"); // 处理403错误
        return response.text(); // 获取403响应正文
      }
      return response.ok
        ? response.json()
        : Promise.reject(new Error("非预期错误"));
    })
    .then((data) => {
      if (typeof data === "string") {
        // 说明是403页面 直接替换页面内容
        document.body.innerHTML = data; // 将响应的403页面内容插入到页面中
      } else {
        if (data.success) {
          alert("文章发布成功！");
          document.getElementById("article-title").value = "";
          document.getElementById("article-content").value = "";
        } else {
          alert("发布失败: " + data.message);
        }
      }
    })
    // .catch((error) => {
    //   if (error.message === "403 Forbidden") {
    //     alert("权限错误：请先登录！");
    //     setTimeout(() => {
    //       window.location.href = "/index.html";
    //     }, 1500); // 1.5秒后重定向
    //   } else {
    //     alert("其他错误");
    //   }
    // });
    .catch((error) => console.error("发布文章错误:", error));
}

// 查看文章详情
function viewArticle(articleId) {
  fetch(`/cgi/article?id=${articleId}`)
    .then((response) => {
      if (response.status === 403) {
        return response.text(); // 获取403响应正文
      }
      return response.ok
        ? response.json()
        : Promise.reject(new Error("非预期错误"));
    })
    .then((data) => {
      if (typeof data === "string") {
        // 说明是403页面 直接替换页面内容
        document.body.innerHTML = data; // 将响应的403页面内容插入到页面中
        return;
      }

      document.getElementById("article-page-title").innerText = data.title;
      document.getElementById("article-page-author").innerText =
        "作者：" + data.author;
      document.getElementById("article-page-date").innerText =
        "发布时间：" + data.date;
      // 为正文部分添加标题和样式
      document.getElementById("article-page-content").innerHTML = `
     <h3>文章内容</h3>
     <div class="article-body">
       ${data.content}
     </div>
     <hr class="article-separator"> <!-- 分隔符 -->
   `;

      // 加载评论
      const commentsSection = document.getElementById("comments-section");
      commentsSection.innerHTML = "";
      data.comments.forEach((comment) => {
        const commentDiv = document.createElement("div");
        commentDiv.classList.add("comment");
        commentDiv.innerHTML = `
                  <p>${comment.content}</p>
                  <p><small>评论者：${comment.commenter} | 评论时间：${comment.date}</small></p>
                   <hr class="comment-separator"> <!-- 评论分隔符 -->
              `;
        commentsSection.appendChild(commentDiv);
      });

      // 显示文章页面，隐藏其他页面
      document.getElementById("article-page").classList.remove("hidden");
      document.querySelector(".container").classList.add("hidden");
      document.getElementById("article-page").dataset.articleId = articleId; // 将 articleId 设置到 article-page 的数据属性
    })
    .catch((error) => console.error("加载文章错误:", error));
}

// 提交评论
function submitComment() {
  const comment = document.getElementById("comment-input").value;
  const articleId = document.getElementById("article-page").dataset.articleId;
  if (!comment.trim()) {
    alert("请输入评论内容！");
    return;
  }
  fetch("/cgi/comment", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: `article_id=${articleId}&content=${encodeURIComponent(comment)}`,
  })
    .then((response) => {
      if (response.status === 403) {
        return response.text(); // 获取403响应正文
      }
      return response.ok
        ? response.json()
        : Promise.reject(new Error("非预期错误"));
    })
    .then((data) => {
      if (typeof data === "string") {
        // 说明是403页面 直接替换页面内容
        document.body.innerHTML = data; // 将响应的403页面内容插入到页面中
        return;
      }
      if (data.success) {
        alert("评论成功！");
        viewArticle(articleId); // 重新加载文章内容
        document.getElementById("comment-input").value = "";
      } else {
        alert("评论失败: " + data.message);
      }
    })
    .catch((error) => console.error("评论错误:", error));
}

function BackToSerachResults() {
  document.getElementById("article-page").classList.add("hidden");
  document.querySelector(".container").classList.remove("hidden");
}
